<template>
  <div style="background-color:#f5f5f5;">
    <!--面包屑-->
    <div class="crumbs">
      <div class="crumbsNav">
        <i class="el-icon-s-home"></i><span>首页 / 置业工具</span>
      </div>
    </div>
    <div class="buyingToolsBox">
      <div class="centerBox">
        <!-- 按揭计划   -->
        <div class="mortgagcScheme">
          <h3>按揭计划</h3>
          <div style="margin-top: 15px;">
            <el-table
              :header-cell-style="{background:'#F5F7FA',color:'#606266'}"
              :data="tableData"
              style="width: 100%;">
              <el-table-column
                prop="date"
                align="center"
                label="银行名单"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                align="center"
                label="实际利率"
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                align="center"
                label="现金回赠">
              </el-table-column>
              <el-table-column
                prop="address"
                align="center"
                label="罚息期">
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="mortgagcScheme graphical" style="margin-top: 30px;">
          <h3>按揭计划</h3>
          <div style="margin-top: 15px;">
            <p style="color: #999999">注:所有新盘内容，包括物业资料,图片等均由28HSE编辑部输入。以上的物业资料只供参考，一切以发展商最新公告为准。</p>
          </div>
          <div class="inpBox">
            <div>
              按揭成数<el-input class="planBtn"  v-model="input" placeholder="51"></el-input>%
            </div>
            <div>
              还款年期<el-input class="planBtn"  v-model="input" placeholder="2"></el-input>年
            </div>
            <div>
              按揭利率<el-input class="planBtn"  v-model="input" placeholder="2.35"></el-input>%
            </div>
          </div>
          <div class="contribution">
            <div>
              <span class="conText">每月供款</span>
              <span>$19,433元</span>
            </div>
            <div>
              <span class="conText">物业楼债</span>
              <span>$ 19,433元</span>
            </div>
          </div>
          <div class="ring">
            <div style="margin-left: 200px;">
              <img src="../../../static/buyingTools/bimg01.jpg" width="250" alt="">
            </div>
            <div class="rightBox">
              <div>
                <span class="span1"></span>
               <p>
                 <span>参考首期</span>
                 <span style="margin-left: 30px">$4,800,000元</span>
               </p>
              </div>
              <div>
                <span  class="span2"></span>
               <p>
                 <span>参考首期</span>
                 <span style="margin-left: 30px">$4,800,000元</span>
               </p>
              </div>
              <div>
                <span class="span3"></span>
               <p>
                 <span>参考首期</span>
                 <span style="margin-left: 30px">$4,800,000元</span>
               </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 地产常用表单-->
        <div class="mortgagcScheme" style="margin-top: 30px;">
          <h3>地产常用表单</h3>
          <div style="margin-top: 15px;">
            <div class="formDom" v-for="item in [1,2,3,4,5,6,7]">
              <div><span class="point"></span>租约样本(DBF)</div>
              <div style="color:red;">下载</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "buyingTools",
    data() {
      return {
        tableData: [{
          date: '中级香港2.375%',
          name: '2.375%',
          address: '2.05%',
          badf: "2年"
        },
          {
            date: '中级香港2.375%',
            name: '2.375%',
            address: '2.05%',
            badf: "2年"
          },
          {
            date: '中级香港2.375%',
            name: '2.375%',
            address: '2.05%',
            badf: "2年"
          },
          {
            date: '中级香港2.375%',
            name: '2.375%',
            address: '2.05%',
            badf: "2年"
          },
          {
            date: '中级香港2.375%',
            name: '2.375%',
            address: '2.05%',
            badf: "2年"
          },
          {
            date: '中级香港2.375%',
            name: '2.375%',
            address: '2.05%',
            badf: "2年"
          }
        ]
      }
    }
  }
</script>

<style scoped>
  /*<!--面包屑-->*/
  .crumbs {
    width: 100%;
    height: 52px;
    background-color: #ad2022;
  }

  .crumbs .crumbsNav {
    width: 1200px;
    height: 50px;
    margin: 0 auto;
    color: #FFFFFF;
    /*border: 1px solid #000;*/
    line-height: 52px;
    text-align: left;
  }

  .buyingToolsBox {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;

  }

  .buyingToolsBox .centerBox {
    width: 1200px;
    height:1600px;
    margin: 30px auto;
    /*border: 1px solid #000;*/
  }

  .buyingToolsBox .centerBox .mortgagcScheme {
    width: 98%;
    height: 400px;
    background-color: #fff;
    text-align: left;
    padding: 15px;
  }
  .graphical{
    height: 600px!important;
  }
  .inpBox{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-flow: row;
    margin-top: 30px;
  }
  .inpBox .planBtn{
    width: 100px;
    margin: 0 15px 0 15px;
  }
  .contribution{
    width: 100%;
    height: 30px;
    /*border: 1px solid #000;*/
    margin-top: 30px;
    justify-content: space-around;
    display: flex;
    flex-flow: row;
    flex-direction: row;
  }
  .contribution .conText{
    color: #999999;
    margin-right: 30px;
  }
  .graphical .ring{
    /*border: 1px solid #000;*/
    height: 300px;
    margin-top: 50px;
    justify-content: flex-start;
    display: flex;
    flex-flow: row;
    flex-direction: row;
  }
  .graphical .ring .rightBox{
    width: 300px;
    line-height: 50px;
    display: flex;
    justify-content: space-around;
    flex-flow: column;
    flex-direction: column;
    margin-left: 30px;
  }
  .graphical .ring .rightBox .span1{
    width: 100px;
    height: 40px;
    background-color:#f9b955;
    display: inline-block;
    border-radius: 5px;
  }
  .graphical .ring .rightBox .span2{
     width: 100px;
     height: 40px;
     background-color:#43cb83;
     display: inline-block;
     border-radius: 5px;
   }
  .graphical .ring .rightBox .span3{
    width: 100px;
    height: 40px;
    background-color:#61bae2;
    display: inline-block;
    border-radius: 5px;
  }

  .graphical .ring div{
    /*border: 1px solid #000;*/
    line-height: 40px;
  }
  .graphical .ring div p{
    float: right;
  }
  /*地产常用表单*/
  .formDom{
    width: 95%;
    height: 30px;
    border-bottom: 1px solid #cccccc;
    display: flex;
    flex-direction: row;
    flex-flow: row;
    justify-content: space-between;
    font-size: 16px;
    padding:0 30px 0 30px;
    margin-top: 15px;


  }
  .point{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color:red;
    border-radius: 50%;
    margin-right: 15px;
  }


</style>
